

/*===========================
       07.TEAM css 
===========================*/

.team-area{}

.single-team{
    @include box-shadow (0px 0px 30px 0px rgba(167,167,167,0.16));
    overflow: hidden;
    border-radius: 10px;
    
    & .team-image{
        position: relative;
        & img{
            width: 100%;
        }
        & .social{
            position: absolute;
            left: 0;
            right: 0;
            bottom: 25px;
            
            & ul{
                background-color: rgba(255, 255, 255, 0.23);
                display: inline-block;
                border-radius: 50px;
                padding: 0 13px;
                position: relative;
                z-index: 5;
                overflow: hidden;
                
                &::before{
                    position: absolute;
                    content: '';
                    width: 100%;
                    height: 100%;
                    z-index: -1;
                    top: 0;
                    left: 0;
                    background: -webkit-linear-gradient(rgba(254,132,100,1) 0%, rgba(254,110,154,1) 100%);
                    background: -o-linear-gradient(rgba(254,132,100,1) 0%, rgba(254,110,154,1) 100%);
                    background: linear-gradient(rgba(254,132,100,1) 0%, rgba(254,110,154,1) 100%);
                    opacity: 0;
                    visibility: hidden;
                    @include transition(0.3s);
                }
                
                & li{
                    display: inline-block;

                    & a{
                        padding: 15px 13px;
                        color: $white;
                    }
                }
            }
        }
    }
    & .team-content{
        padding: 30px;
        
        & .holder-name{
            & a{
                font-size: 20px;
                font-weight: 700;
                color: $black;
                
            }
        }
        & .text{
            margin-top: 5px;
        }
    }
    
    &:hover{
        & .team-image{
            & .social{
                & ul{
                    
                    &::before{
                        opacity: 1;
                        visibility: visible;
                    }
                    
                    & li{
                        & a{}
                    }
                }
            }
        }
    }
}















